<template>
    <div class="app-container">
        <div class="cabinet-add" align="right" v-if="cabientList.length != 0">
            <el-button type="primary" @click="handleAdd">新建档案柜</el-button>
        </div>
        <div class="cabinet-list" v-loading="loading">
           
             <!-- <el-popover :visible="item.visible" trigger="contextmenu" v-for="(item, index) in cabientList" :key="index"> 
                <div class="flex">

                </div>               -->
                <template v-for="(item, index) in cabientList" :key="index">
                    <!-- <el-tooltip :content="item.remark" :disabled="!item.remark" >
                    </el-tooltip> -->
                        <div class="cabinet-item el-card is-always-shadow"  title=""  @click="CabinetClick(item,$event)" @contextmenu.prevent="CabinetContextmenu(item, $event)"  @blur="item.visible = false">
                            <img src="@/assets/images/cabinet-icon.png" alt="">
                            <p class="txt">{{ item.name }}号柜</p>
                            <!-- <p class="txt ellipsis">{{ item.remark }}</p> -->
                            <el-text class="txt mb-2" truncated>{{item.remark}}</el-text>
                            <el-popover >
                                <template #reference>
                                    <el-icon class="operte-btn" @click.stop><MoreFilled /></el-icon>
                                </template>
                                <div class="flex">
                                    <el-button text @click.stop="editCabinet(item)" type="primary">编辑</el-button>
                                    <el-button text @click.stop="cabinetDel(item)" type="danger">删除</el-button>
                                </div>
                            </el-popover>
                        </div>
                </template>
            <!-- </el-popover> -->
            <div class="item-add el-card is-always-shadow" v-if="cabientList.length == 0" @click="handleAdd">
                <el-icon><Plus /></el-icon>
                <p class="txt">新建档案柜</p>
            </div>
        </div>
        <el-dialog :title="edit ? '编辑档案柜':'新建档案柜'" v-model="dialogVisible" width="500px" :before-close="handleClose" @close="handleClose">
            <el-form
                :model="FormData"
                :rules="FormRules"
                ref="FormRef"
                label-width="90px"
            >
                <el-form-item label="柜号" prop="cabinetName">
                    <!-- <el-input-number v-model="FormData.cabinetName"  :precision="0" :min="0"  :controls="false" class="form-input" placeholder="请为档案柜命名，例如8"/> -->
                    {{ FormData.cabinetName }}
                </el-form-item>
                <template v-if="!edit">
                    <el-form-item label="层数" prop="floorNum">
                        <el-input-number v-model="FormData.floorNum" :precision="0" :min="0" align="left" :controls="false" class="form-input" style="width: 100%;" placeholder="该档案柜共有几层" />
                    </el-form-item>
                    <el-form-item label="盒数" prop="boxNum">
                        <el-input-number v-model="FormData.boxNum" :precision="0" :min="0" align="left" :controls="false"  class="form-input" style="width: 100%;" placeholder="每层最多能装几盒" />
                    </el-form-item>
                </template>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="FormData.remark" :autosize="{ minRows: 3, maxRows: 6 }" type="textarea" class="form-input" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div  class="dialog-footer" align="center">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue';
import { Loading, Plus, MoreFilled } from '@element-plus/icons-vue';
import { CabinetQuery, CabinetAdd, CabinetDel, CabinetEdit } from '@/api/user';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { useRouter } from 'vue-router'
const dialogVisible = ref(false);
const cabinetDetailVisible = ref(false);
const loading = ref(false);
const edit = ref(false);
const router = useRouter();
const submitLoading = ref(false);
const FormData = ref({});
const FormRef = ref({});
const FormRules = computed(() => {
    return {
        cabinetName: [
            { required: true, message: "请为档案柜命名" },
        ],
        floorNum: [
            { required: true, message: "请输入层数" },
        ],
        boxNum: [
            { required: true, message: "请输入盒数" },
        ]
    };
});
const cabientList = ref([])

const getCabinetData = async () =>{
    loading.value = true;
    let res = await CabinetQuery();
    loading.value = false;
    if(res.errorCode == 0) {
        cabientList.value = res.data;
    }
}
getCabinetData();
// 新建
const handleAdd = () => {
    edit.value = false;
    FormData.value.cabinetName = cabientList.value.length == 0 ?  1 : Number(cabientList.value[cabientList.value.length-1].name) + 1;
    dialogVisible.value = true;
}
// 编辑
const editCabinet = (row) => {
    edit.value = true;
    FormData.value = {
        ...row,
        cabinetName: row.name,
        remark: row.remark,
    };
    dialogVisible.value = true;
    
}
// 提交
const handleSubmit = async () => {
    FormRef.value.validate(async (valid) => {
        if (valid) {
            submitLoading.value = true;
            let Fun = edit.value ? CabinetEdit : CabinetAdd;
            const res = await Fun(FormData.value);
            submitLoading.value = false;
            if (res.errorCode == 0) {
                dialogVisible.value = false;
                ElMessage.success('操作成功');
                getCabinetData();
            }
        }
    });
}
// 详情

// 删除
const cabinetDel = async (row) => {
    ElMessageBox.confirm(
        '此操作将永久删除该档案柜. 是否继续?',
        '警告',
    {

        confirmButtonText:'确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
    .then(async() => {
        const loading = ElLoading.service({
            lock: true,
            text: '正在删除...',
            spinner: Loading,
            background: 'rgba(255, 255, 255, 0.8)'
        });
        const res = await CabinetDel({
            cabinetId: row.id,
        });
        loading.close()
        if(res.errorCode == 0) {
            getCabinetData();
            ElMessage.success('删除成功');
        }
    })
}

const handleClose = () => {
    FormData.value = {};
    dialogVisible.value = false;
    submitLoading.value = false;
}
const CabinetClick = (item,e) => {
    e.preventDefault();
    localStorage.setItem('cabinetObj', JSON.stringify(item));
    router.push({ path: '/filingCabinet/' + item.id,});
}

const CabinetContextmenu = async (item, e) => {    
    if(e.button === 2){
        e.preventDefault();
        await cabientList.value.map(item=>item.visible = false)
        item.visible = true;
    }
}

const cabinetMouseleave = (item) => {
    if(cabientList.value.length) {
        item.visible = false;
    }
}

</script>

<style scoped lang="scss">
.cabinet-list{
    display: flex;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 170px));
    grid-gap: 20px;
    margin-top: 15px;
    .cabinet-item,.item-add{
        padding: 15px;
        font-weight: 500;
        background: #fff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        position: relative;
        &+.el-card{
            margin-top: 0;
        }
        img{
            width: auto;
            height: 60px;
            margin-bottom: 10px;
        }
        .el-icon{
            font-size: 30px;
            margin: 10px 0;
        }
        .txt{
            font-size: 20px;
            line-height: 1.3;
        }
        .mb-2{
            font-size: 16px;
        }
        .operte-btn{
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            padding: 0 5px;
            z-index: 10;
            cursor: pointer;
            transform: rotate(90deg);
        }
    }
    .item-add{
        &:hover{
            color: var(--el-color-primary);
        }
    }
}

</style>